<template>
  <div>
    <!-- ====================== 订单列表 ==================== -->
    <!-- 面包屑 -->
    <MBX level1="订单管理" level2="订单列表"></MBX>

    <!-- 主体   卡片 -->
    <el-card class="mt16">
      <!-- 头部 -->
      <el-row>
        <el-col :span="10">
          <el-input
            clearable
            @clear="searchBtn"
            placeholder="请输入订单编号"
            class="input-with-select"
            v-model="userInfo.query"
            @input="searchBtn"
          >
            <!-- @input="searchBtn" -->
            <el-button
              @click="searchBtn"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table class="mt16" :data="ordersData" border style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price"></el-table-column>
        <el-table-column label="是否支付" prop="pay_status">
          <template slot-scope="scope">
            <div>
              <!-- 过滤器 -->
              <el-tag :type="typeObj[scope.row.pay_status]">{{
                scope.row.pay_status | rankss
              }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send"></el-table-column>
        <el-table-column label="下单时间" prop="create_time">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time | dataTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <!-- 编辑 -->
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="editOpen(scope.row)"
              ></el-button>
              <!-- 地址 -->
              <el-button
                type="info"
                size="mini"
                icon="el-icon-location"
                @click="wuLiuBtn(scope.row)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block mt16">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="userInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="userInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 【地址】物流弹出框 -->
    <el-dialog title="查看物流进度" :visible.sync="wuLiuIsShow">
      <el-form>
        <el-timeline>
          <el-timeline-item
            :icon="item.icon"
            :color="item.color"
            v-for="(item, index) in wuLiu"
            :key="index"
            :timestamp="item.time"
          >
            {{ item.context }}
          </el-timeline-item>
        </el-timeline>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="wuLiuIsShow = false">取 消</el-button>
        <el-button type="primary" @click="wuLiuOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 【编辑的弹框】 -->
    <el-dialog title="修改地址" :visible.sync="editStatus">
      <el-form>
        <el-form-item label="省市区/县">
          <el-cascader
            v-model="checkArr"
            :options="city"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input class="editInput" v-model="editValue"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editStatus = false">取 消</el-button>
        <el-button type="primary" @click="editOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import city from "../../../mock/city";
// console.log('city',city);
import wuLiu from "../../../mock/wuLiu";
import _ from "lodash"; // 导入插件lodash 他的全局配置是一个_
export default {
  data() {
    return {
      // 物流时间轴
      // activities: [],
      wuLiu: wuLiu.data, // 定义物流的数据名
      checkArr: [], // 三级分类  存放选中分类id组成的数组
      editValue: "", //编辑的输入信息
      // 三级菜单的属性
      defaultProps: {
        expandTrigger: "hover", // 次级菜单的展开方式
        value: "value", //指定选项的值为选项对象的某个属性值
        children: "children", //指定选项的子选项为选项对象的某个属性值
        label: "label", ///指定选项标签为选项对象的某个属性值
      },
      editStatus: false, // 编辑的状态框
      city,
      wuLiuIsShow: false, // 物流，地址的弹出框状态
      wuLiuIsData: [], // 物流数据
      // 是否支付颜色
      typeObj: {
        1: "success", // 绿色 ，已支付
        0: "danger", //  红色 ，未支付
      },
      searchData: [], // 搜索出来的数据
      ordersData: [], // 表格里的列表数据
      searchOrder_number: "", // 搜索的订单编号
      total: 0, // 分页的总条目数
      //  订单数据列表 查询的数据
      userInfo: {
        query: "", //查询参数
        pagenum: 1, //当前页码
        pagesize: 5, //每页显示条数
      },
    };
  },
  methods: {
    // 三级 级联框的选择按钮
    handleChange() {},
    // 编辑点击确定按钮，添加到后台
    editOk() {
      this.editStatus = false;
    },
    // 点击编辑出现弹框
    editOpen(row) {
      // console.log("编辑", row);
      this.editValue = "";
      this.checkArr = "";
      this.editStatus = true;
    },
    // 点击物流弹出框的确定按钮
    wuLiuOk() {
      this.wuLiuIsShow = false;
    },
    // 点击地址图标弹出弹出框
    async wuLiuBtn(row) {
      // console.log(row.order_id);
      this.wuLiuIsShow = true;
    },
    // 分页
    handleSizeChange(val) {
      this.userInfo.pagesize = val;
      this.ordersApiList();
    },
    handleCurrentChange(val) {
      this.userInfo.pagenum = val;
      this.ordersApiList();
    },
    // 搜索按钮   没有防抖
    // searchBtn() {
    //   console.log("搜索", this.userInfo.query);

    //   if (this.userInfo.query !== "") {
    //     this.ordersData = this.ordersData.filter((item) => {
    //       return item.order_number.includes(this.userInfo.query);
    //     });
    //   } else {
    //     this.ordersApiList();
    //   }
    // },

    // 搜索按钮  有防抖
    searchBtn: _.debounce(function () {
      if (this.userInfo.query !== "") {
        this.ordersData = this.ordersData.filter((item) => {
          return item.order_number.includes(this.userInfo.query);
        });
        this.total = this.ordersData.length;
      } else {
        this.ordersApiList();
      }
    }, 1000),

    // 请求列表数据
    async ordersApiList() {
      const res = await this.$API.ordersApi(this.userInfo);
      // console.log("列表数据", res);
      this.total = res.total;
      this.ordersData = res.goods;
      // console.log("列表数据", this.ordersData);
    },
  },
  created() {
    this.ordersApiList();
    // this.searchBtn();
  },
};
</script>

<style lang="scss" scoped>
.el-cascader,
.editInput {
  width: 60%;
}
</style>
